@import (reference) "variables";

.clear{clear: both;}
.fl {float: left;}
.fr {float: right;}

.al {text-align: left;}
.ac {text-align: center;}
.ar {text-align: right;}
.at {vertical-align: top;}
.am {vertical-align: middle;}
.ab {vertical-align: bottom;}

.block {display: block}
.inline {display: inline;}
.inlock {display: inline-block;}
.hide {display: none;}

.over-hide {overflow: hidden;}
.overx-hide {overflow-x: hidden;}
.overy-hide {overflow-y: hidden;}

.size-x-large {font-size: @font-size-x-large;}
.size-large {font-size: @font-size-large;}
.size-middle {font-size: @font-size-middle;}
.size-small {font-size: @font-size-small;}
.size-x-small {font-size: @font-size-x-small;}
.size-zero {font-size: 0;}

.rad-half {border-radius: 50%;}
.rad-2 {border-radius: 2px;}
.rad-4 {border-radius: 4px;}
.rad-6 {border-radius: 6px;}
.rad-8 {border-radius: 8px;}
.rad-10 {border-radius: 10px;}
.rad-12 {border-radius: 12px;}
.rad-14 {border-radius: 14px;}
.rad(@n){border-radius: @n}

.ht-full {height: 100%;}
.wid-full {width: 100%;}
.full {.wid-full; .ht-full;}
.wid-half {width: 50%;}
.wid-90 {width: 90%;}
.wid-80 {width: 80%;}
.wid-75 {width: 75%;}
.wid-70 {width: 70%;}
.wid-60 {width: 60%;}
.wid-50 {width: 50%;}
.wid-40 {width: 40%;}
.wid-30 {width: 30%;}
.wid-25 {width: 25%;}
.wid-20 {width: 20%;}
.wid-10 {width: 10%;}

.bl {border-left: 1px solid @color-line;}
.br {border-right: 1px solid @color-line;}
.bt {border-top: 1px solid @color-line;}
.bb {border-bottom: 1px solid @color-line;}

.bg-white {background-color: white;}
.bg-black {background-color: black;}
.bg-grey {background-color: grey;}
.bg-yellow {background-color: yellow;}
.bg-red {background-color: red;}
.bg-blue {background-color: blue;}
.bg-default {background-color: @color-page;}

.text-white {color: white;}
.text-black {color: black;}
.text-grey {color: grey;}
.text-default {color: @color-text;}
.text-through {text-decoration: line-through;}
.text-under {text-decoration: underline;}
.text-over {text-decoration: overline;}
.text-none {text-decoration: none;}

.margin-auto {margin-left: auto; margin-right: auto;}

.nml {margin-left: 0;}
.nmr {margin-right: 0;}
.nmh {margin-left: 0; margin-right: 0;}
.nmt {margin-top: 0;}
.nmb {margin-bottom: 0;}
.nmv {margin-top: 0; margin-bottom: 0;}
.npl {padding-left: 0;}
.npr {padding-right: 0;}
.nph {padding-left: 0; padding-right: 0;}
.npt {padding-top: 0;}
.npb {padding-bottom: 0;}
.npv {padding-top: 0; padding-bottom: 0;}

.fixed {position: fixed;}
.absolute {position: absolute;}
.relative {position: relative;}

.pointer {cursor: pointer;}
.move {cursor: move;}

.unselectable {-ms-user-select: none; -moz-user-select: none; -webkit-user-select: none;}
.one-line {overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.normal-ul {list-style: none;.npl;.nmv;}
.normal-a {.text-none;color: @color-text;}
.normal-table {border-collapse: collapse; border-spacing: 0;}

.both-height(@ht) {height: @ht; line-height: @ht;}
